<template>
  <div class="">
    <div class="phonebox">
      <img src="@/assets/images/phone.png" alt="" class="phone" />
      <div class="innerphone">
        <!-- <iframe
          :key="iphonekey"
          ref="iphone"
          id="iphone"
          :src="iframeUrl"
          width="100%"
          height="100%"
          frameborder="0"
          sandbox="allow-same-origin allow-top-navigation allow-scripts"
        ></iframe> -->
        <img :src="link" alt="" style="width:100%;height:100%" />
      </div>
    </div>
    <div class="mt_20 flexcenter">
      <el-button type="primary" plain icon="">刷新</el-button>
      <!-- <el-button type="primary" plain icon="" @click="setUrl(iframeUrl)">刷新</el-button> -->
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { templateInfo } from '@/api/template'
export default {
  data() {
    return {
      // iframeUrl: "http://121.43.50.8:2306/h5/#/",
      link:''
    };
  },
  computed: {
    // ...mapGetters(["iframeUrl",'iphonekey']),
  },
  props: {
    // activeId: {
    //   default: "",
    // },
    // t_id:{
    //   default:""
    // }
    bgurl:{
      default:''
    }
  },
  watch:{
    bgurl:{
      immediate: false,
      handler: function (val){
        this.link = val
      }
    }
  },
  // mounted() {
  //   // this.refreshFn(this.iframeUrl);
  // },
  created(){
    this.link = this.bgurl
    // if(this.t_id){
    //   this.getMudelInfo()
    // }
    // this.setUrl(this.h5domain + "?id="+this.activeId+'&istest=1');
  },
  methods:{
    // ...mapActions(["setUrl"]),

    getMudelInfo(){
      templateInfo({id:this.t_id}).then(res=>{
        this.bgurl = this.domain + res.data.url
      })
    }
  }
};
</script>

<style lang="scss" scoped>
// .createleft{
//     padding-top: 50px;
// }
.phonebox {
  width: 360px;
  height: 660px;
  position: relative;
}
.phone {
  width: 360px;
  height: 100%;
}
.innerphone {
  position: absolute;
  top: 41px;
  left: 19px;
  right: 19px;
  bottom: 20px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  // background-color: red;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
  overflow: hidden;
}
.el-button {
  padding: 8px 30px;
}
</style>